
<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>css布局方式 - Hexo</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="Fechin,"> 
    <meta name="description" content="一、什么是BFC（BlockFormattingContext）？BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BF,"> 
    <meta name="author" content="John Doe"> 
    <link rel="alternative" href="atom.xml" title="Hexo" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    
    
    
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:title" content="css布局方式 - Hexo"/>
    <meta name="twitter:description" content="一、什么是BFC（BlockFormattingContext）？BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BF,"/>
    
    
    
    
    <meta property="og:site_name" content="Hexo"/>
    <meta property="og:type" content="object"/>
    <meta property="og:title" content="css布局方式 - Hexo"/>
    <meta property="og:description" content="一、什么是BFC（BlockFormattingContext）？BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BF,"/>
    
<link rel="stylesheet" href="/css/diaspora.css">

<meta name="generator" content="Hexo 5.4.1"></head>

<body class="loading">
    <span id="config-title" style="display:none">Hexo</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="http://example.com"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle">css布局方式</h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">css布局方式</h1>
        <div class="stuff">
            <span>二月 21, 2022</span>
            

        </div>
        <div class="content markdown">
            <h2 id="一、什么是BFC（BlockFormattingContext）？"><a href="#一、什么是BFC（BlockFormattingContext）？" class="headerlink" title="一、什么是BFC（BlockFormattingContext）？"></a>一、什么是BFC（BlockFormattingContext）？</h2><p>BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。</p>
<p>css中的BFC有什么用？<br>块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。<br>1、同一个BFC下外边距会发生折叠<br> 也就是说，两个相邻的普通流中的块元素垂直方向上的margin会折叠。</p>
<ol start="2">
<li>利用BFC可以消除MarginCollapse<br>　　BFC导致了margincollapse，而现在又要用它来解决margincllapse. 但是始终要记住一点：只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase. 如果它们属于不同的BFC，则不会有margincollapse. 因此我们可以再建立一个BFC去阻止margincollpase的发生。</li>
<li>、BFC可以包含浮动的元素（清除浮动）<br>正常情况下，浮动的元素会脱离普通文档流，使父元素高度坍塌。即外层的p会无法包含内部浮动的p。<br>但如果我们触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部p容器就可以包裹着浮动元素。</li>
<li>BFC可以阻止元素被浮动元素覆盖/（两栏布局）</li>
</ol>
<h2 id="二-css的布局方式有哪些？"><a href="#二-css的布局方式有哪些？" class="headerlink" title="二.css的布局方式有哪些？"></a>二.css的布局方式有哪些？</h2><p>2.1定位布局：<br>position 属性<br>position 属性规定应用于元素的定位方法的类型。<br>有五个不同的位置值：<br>static：HTML 元素默认情况下的定位方式为 static（静态）。<br>静态定位的元素不受 top、bottom、left 和 right 属性的影响。<br>relative：元素相对于其正常位置进行定位<br>fixed：元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置<br>固定定位的元素不会在页面中通常应放置的位置上留出空隙。<br>absolute：的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。<br>然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。<br>sticky： 的元素根据用户的滚动位置进行定位。<br>粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。</p>
<h2 id="2-2-媒体查询-响应式布局？"><a href="#2-2-媒体查询-响应式布局？" class="headerlink" title="2.2 媒体查询+响应式布局？"></a>2.2 媒体查询+响应式布局？</h2><p>什么是媒体查询：</p>
<ol>
<li>媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。</li>
<li>css2: media type media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。</li>
<li>css3: media query media query是CSS3对media type的增强，事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。</li>
</ol>
<p>如何使用媒体查询：<br>link标签引入：media属性（eg：引入（screen）彩色屏幕显示，并且最大宽度不超过800px时候的CSS样式）</p>
<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">
媒体类型（Media Type):  all(全部)、screen(屏幕)、print(页面打印或打印预览模式)
媒体特性（Media features): width(渲染区宽度)、device-width(设备宽度)... Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式

<p>弹性布局：flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性<br>属性：<br>1.flex-direction：flex items默认都是沿着main axis（主轴）从main start 开始往main end方向排布<br>flex-direction决定了main axis的方向，有四个取值row（默认值）、row-reverse、column、column-reverse</p>
<p>2.justify-content决定了flex item在main axis上的对齐方式</p>
<pre><code>flex-start(默认值):与main start对齐
flex-end：与main end对齐
center：居中
space-between：flex items 之间的距离相等，与main start、main end两端对齐
space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半
</code></pre>
<p>3.align-items：决定flex items在cross axis上的对齐方式</p>
<pre><code>normal：在弹性布局中，效果和stretch一样
stretch：前提是items不设置高度，当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container(或者换句话说：如果项目未设置高度或设为auto，将占满整个容器的高度。)
flex-satrt:与cross start 对齐
flex-end:与cross end 对齐
center:居中对齐
baseline:与基准线对齐
</code></pre>
<p>4.flex-wrap：决定了flex container 是单行还是多行</p>
<pre><code>nowrap(默认)：单行
wrap：多行
//这个比较少用
wrap-reverse:多行（对比wrap，cross start 与cross end相反）
</code></pre>
<p>5.align-content：决定了多行flex items 在cross axis的对齐方式 用法与justify-content相似 一个是横轴。一个控制竖轴</p>
<pre><code>stretch(默认值)：与align-items的stretch类似，当items有高度的时候，无效果
flex-start:与cross start 对齐
flex-end :与cross end 对齐
center：居中对齐
space-between:flex items 之间的距离相等，与cross start、cross end两端对齐
space-evently: flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离的一半
</code></pre>
<p>6.flex-flow 是flex-direction与flex-wrap的简写<br>也就是说，当你使用这个属性的时候，你可以使用上述两个的属性值，例如：flex-flow: row wrap; （水平排列，多行显示）</p>
<ol start="7">
<li>order： 决定flex items的排布顺序  (用的不多)<br> 可以设置为任意整数（正整数、负整数、0），值越小越排在前面<br> 默认值为0</li>
</ol>
<p>8.align-self：</p>
<pre><code>可以通过align-self 覆盖flex container 设置的align-items
auto(默认值):遵从flex container的align-items设置
stretch、flex-start、flex-end、center、baseline效果与align-items一致
</code></pre>
<p>9.flex-grow：</p>
<pre><code>决定了flex items如何扩展
可以设置为任意非父数字（小数，整数 0），默认为0
当flex container 在main axis方向上有剩余得size时，flex-grow属性才会有效
如果所有flex items 的flex-grow 综合sum不超过1，这直接乘以剩余size就是扩展大小、
如果超过1 扩展size=剩余size*flex-grow/sum
</code></pre>
<p>10.flex-shrink：<br>flex-shrink (shrink 缩小，收缩)与flex-grow相似，一个扩展，一个伸缩<br>11.flex-basis<br>用来设置flex items 在 main axis方向上的base size</p>
<pre><code>默认为auto，可以设置具体的宽度数值
决定flex items最终base size 的因素，优先级从高到低
    max-width\max-height\min-width\min-height
    flex-basis
    width\height
    内容本身的size
</code></pre>
<h2 id="三、flex常用的api？"><a href="#三、flex常用的api？" class="headerlink" title="三、flex常用的api？"></a>三、flex常用的api？</h2><p>在父项目上的可添加的属性<br>父属性必须拥有display:flex这一项 负责所有属性不起作用</p>
<p>flex-direction 决定主轴的方向<br>1.row水平向右<br>2.row-reverse 水平向左<br>3.column 垂直向下<br>4.column-reverse垂直向上</p>
<p>.justily-content 设置主轴上子元素的排列方式<br>1.flex-start 主轴方向从头到尾<br>2.flex-end 侧轴方向从尾到头排列<br>3.center 在主轴居中对齐<br>4.space-around 平分剩余空间<br>5.space-between 先两边贴边，在平分剩余空间<br>6.space-evenly 每个子项目的间隔相等包裹贴边</p>
<p>align-items 设置侧轴上子元素的排列方式（单行）<br>1.flex-start 侧轴方向从头到尾排列<br>2.flex-end 侧轴方向从尾到头排列<br>3.center 侧轴剧中排列<br>4.stretch 如果项目未设置高度，则会自己拉伸到父项的高度<br>5.baseLine 项目的第一行文字的基线对齐</p>
<p>align-content 设置侧轴上子元素的排列方式（多行）<br>1.flex-start 侧轴方向从头到尾排列<br>2.flex-end 侧轴方向从尾到头排列<br>3.center 侧轴剧中排列<br>4.space-around 子项在侧轴平分剩余空间<br>5.space-between 子项在侧轴先贴向两边，在平分剩余空间<br>6.stretch 如果项目未设置高度，则会自己拉伸到父项的高度<br>7.space-evenly 每一行元素都完全上下等分。</p>
<p>flex-wrap 设置子元素是否换行<br>1.wrap<br>2.nowrap<br>3.wrap-reverse</p>
<p>在子项目上可添加的属性<br>flex 分配剩余空间 值为0-9999<br>align-self</p>
<ol>
<li>auto 自动</li>
<li>flex-start 从头到尾</li>
<li>flex-end 从尾到头</li>
<li>center 居中</li>
<li>baseline 项目的第一行文字的基线对齐</li>
<li>stretch 拉伸</li>
</ol>
<h2 id="四、rem的原理？"><a href="#四、rem的原理？" class="headerlink" title="四、rem的原理？"></a>四、rem的原理？</h2><p>**rem是什么？<br>rem（font size of the root element）是指相对于根元素的字体大小的单位<br>**rem布局原理<br>拿到设计稿，按照设计稿的宽去设置一个合适的rem , 配合js查询屏幕大小来改变html的font-size，从而达到适配各种屏幕的效果<br>**rem布局优缺点<br>优点，宽度自适应，可以完美适配不同宽度的屏幕<br>缺点，高度不固定，如果遇到高度要求很严格的就实现不了</p>
<h2 id="五、百分比布局"><a href="#五、百分比布局" class="headerlink" title="五、百分比布局?"></a>五、百分比布局?</h2><p>app:layout_heightPercent：用百分比表示高度<br>app:layout_widthPercent：用百分比表示宽度<br>app:layout_marginPercent：用百分比表示View之间的间隔<br>app:layout_marginLeftPercent：用百分比表示左边间隔<br>app:layout_marginRight：用百分比表示右边间隔<br>app:layout_marginTopPercent：用百分比表示顶部间隔<br>app:layout_marginBottomPercent：用百分比表示底部间隔<br>app:layout_marginStartPercent：用百分比表示距离第一个View之间的距离<br>app:layout_marginEndPercent：用百分比表示距离最后一个View之间的距离<br>app:layout_aspectRatio：用百分比表示View的宽高比</p>
<h2 id="六、vh-vw的区别？"><a href="#六、vh-vw的区别？" class="headerlink" title="六、vh/vw的区别？"></a>六、vh/vw的区别？</h2><p>vw 和 vh 也是相对长度单位。<br>1 vw = 1/100 视口宽度；<br>1 vh = 1/100 视口高度；<br>七、浮动<br> （1）. 清除浮动的方法有哪些以及优缺点？</p>
<ol>
<li>额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）<br>优点：通俗易懂，方便<br>缺点：添加无意义标签，语义化差</li>
<li>父级添加overflow属性（父元素添加overflow:hidden）（不推荐）<br>通过触发BFC方式，实现清除浮动<br>优点：代码简洁<br>缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素</li>
<li>使用after伪元素清除浮动（推荐使用）<br>优点：符合闭合浮动思想，结构语义化正确<br>缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.</li>
<li>使用before和after双伪元素清除浮动<br>优点：代码更简洁<br>缺点：用zoom:1触发hasLayout.</li>
</ol>
<p>（2）为什么要清除浮动？<br>清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题</p>
<h2 id="八、绝对居中？"><a href="#八、绝对居中？" class="headerlink" title="八、绝对居中？"></a>八、绝对居中？</h2><p>第一种： 伸缩盒子，要定义在父类</p>
<p>display: flex;<br>justify-content: center; //水平居中<br>align-items: center; //垂直居中</p>
<p>注意：不能加margin，否则无效，padding（是否能加？）</p>
<p>第二种：不知道盒子长宽：（比较好）</p>
<p>top、right、bottom、left全为0， margin: auto; //垂直水平居中：<br>position: relative; //给父盒子相对定位，<br>position: absolute; //给子盒子绝对定位，</p>
<p>第三种：知道盒子长宽<br>父元素相对定位<br>子元素绝对定位</p>
<p>left: 50%; top: 50%;<br>margin-left: 负的子盒子宽度一半。<br>margin-top: 负的子盒子高度一半；</p>
<p>第四种：使用css3 translate属性，使用的是偏移量</p>
<p>给父盒子相对定位，position: relative;<br>给子盒子绝对定位，position: absolute; </p>
<p>子盒子：</p>
<p>left: 50%;<br>top: 50%;<br>transform: translate(-50%, -50%); </p>
<p>第五种：<br>设置盒子外边框，使外盒子居中，左右外边框值相等（长度未知）<br>水平居中: 在div的position为relative（相对定位时有效，绝对定位无效）<br>水平居中：给div设置一个宽度，然后添加margin:0 auto属性</p>
<h2 id="九、盒模型"><a href="#九、盒模型" class="headerlink" title="九、盒模型"></a>九、盒模型</h2>
            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="">
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        
                            <li title="0" data-url="http://link.hhtjim.com/163/425570952.mp3"></li>
                        
                    
                        
                            <li title="1" data-url="http://link.hhtjim.com/163/425570952.mp3"></li>
                        
                    
                </ul>
            
        </div>
        
    <div id="gitalk-container" class="comment link"
		data-enable="false"
        data-ae="false"
        data-ci=""
        data-cs=""
        data-r=""
        data-o=""
        data-a=""
        data-d="false"
    >查看评论</div>


    </div>
    
</div>


    </div>
</div>
</body>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/typed.js"></script>
<script src="/js/diaspora.js"></script>


<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">


<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>






</html>
